<template>
  <view class="content">
    <van-nav-bar title="失信名单" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <van-notice-bar custom-class="notice-list" color="#E94148" background="#FFF0F0" wrapable text="">
      <text>以下用户因存在交易纠纷被投诉，平台已收回账号权益并下架信息，请注意识别，以免上当受骗！</text>
      <text>举报投诉请向客服反馈！</text>
    </van-notice-bar>
    <Scrollbox className="roster" @lowerFun="getList" :otherHeight="350" :statusBarHeight="HeadNavHeight">
      <template #contScrollBox>
        <view class="roster-list" v-for="(item, index) in list" :key="index">
          <view class="title-box">
            <zero-lazy-load
              class="img-box"
              :image="item.member_head"
              loadingImg="https://images.tongzhuangkc.com/tz/default-user.png"
              errorImg="https://images.tongzhuangkc.com/tz/default-user.png"
              borderRadius="16"
            ></zero-lazy-load>
            <view class="title-info">
              <view class="van-cell-text">{{ item.member_name }}</view>
              <text>微信：{{ item.member_mobile }}</text>
            </view>
          </view>
          <view class="title-time"></view>
        </view>
      </template>
    </Scrollbox>
  </view>
</template>

<script>
import { reactive, toRefs } from 'vue'
import Scrollbox from '@/components/scrollbox/index'
import { blackList } from '@/http/user'
import { onShow } from '@dcloudio/uni-app'
export default {
  components: {
    Scrollbox,
  },
  setup() {
    const state = reactive({
      list: [],
      listQuery: {
        page: 1,
      },
      otherHeight: 370,
      isEnd: false,
    })
    const getList = async () => {
      if (state.isEnd) return
      try {
        let data = await blackList(state.listQuery)
        const { list, total_page } = data.data
        state.list = state.listQuery.page === 1 ? list : state.list.concat(list)

        if (list.length === 0 || total_page === state.listQuery.page) {
          state.isEnd = true
        } else {
          state.listQuery.page++
        }
      } catch (e) {
        state.isRefresh = false
        state.loading = false
      }
    }
    onShow(() => {
      state.listQuery.page = 1
      state.isEnd = false
      getList()
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 3,
      })
    }

    return {
      ...toRefs(state),
      onClickLeft,
      getList,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
}
.notice-list {
  text {
    display: block;
  }
}
.roster-list {
  padding: 24rpx 32rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #e8e8e8;
  .title-box {
    display: flex;
    width: calc(100% - 251rpx);
    .img-box {
      width: 80rpx;
      height: 80rpx;
      margin-right: 24rpx;
      border-radius: 50%;
    }
    .title-info {
      width: calc(100% - 104rpx);
    }
    .van-cell-text {
      height: 44rpx;
      font-size: 28rpx;
      width: 100%;
      @include text-ellipsis(1);
    }
    text {
      font-size: 24rpx;
      color: #555b66;
    }
  }
  .title-time {
    width: 40rpx;
    height: 40rpx;
    background: url('https://images.tongzhuangkc.com/tz/warning%402x.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
